<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录 - Beehive Dashboard</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>

    <style>
        a {
            text-decoration: none;
        }
    </style>

    <script th:inline="javascript" th:if="${session.loginUser != null}">
        // 上帝的归上帝，撒旦的归撒旦
        let role = [[${session.loginUser.role}]]
        if (role === "用户") {
            location.href = "/index";
        } else {
            location.href = "/admin";
        }
    </script>

</head>
<body>

<!-- 注意rgb()-->
<div style="position: absolute;
                left: 50%; top: 45%; width: 320px;
                border-radius: 5px;
                padding: 18px 28px 28px 28px;
                box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%);
                margin: -160px 0 0 -160px;
                font-family: '雅黑', monospace">

    <form class="container">
        <div id="div1" class="row" style="text-align: center">
            <span style="line-height: 60px; font-size: 38px; margin: 0 auto; color: #1790fe">Beehive</span>
        </div>
        <div id="div2" class="row mt-3">
            <input type="text" class="form-control"
                   id="username" name="username" placeholder="用户名"
                   style="height: 34px" oninput="showTips1()">
            <span style="color: red; display: none" id="tip1" >*用户名不能为空</span>
        </div>
        <div id="div3" class="row mt-3">
            <input type="password" class="form-control"
                   id="password" name="password" placeholder="密码"
                   style="height: 34px" oninput="showTips2()">
            <span style="color: red; display: none" id="tip2">*密码不能为空</span>
        </div>
        <div id="div4" class="row mt-3 mb-3">
            <a class="layui-btn layui-btn-normal"
                    style="width: 100%; outline: none;
                    height: 34px; line-height: 34px;
                    text-align: center; text-decoration: none"
                    onclick="login()">登录
            </a>
        </div>

    </form>
</div>

<script>

    document.onkeypress = function (event) {
        event = (event || window.event);
        if (event.keyCode == 13) {
            login();
        }
    }

    function showTips1() {
        let $userObj = $("#username");
        if ($userObj.val().length === 0) {
            $("#tip1").show();
            errorCss($userObj);
        } else {
            $("#tip1").hide();
            normalCss($userObj);
        }

    }


    function showTips2() {
        let $passObj = $("#password")
        if ($passObj.val().length === 0) {
            $("#tip2").show();
            errorCss($passObj);
        } else {
            $("#tip2").hide();
            normalCss($passObj);
        }
    }

    // 空提示样式
    function errorCss(obj) {
        obj.css("border-style", "solid");
        obj.css("border-color", "#dc3545");
    }

    // 恢复正常样式
    function normalCss(obj) {
        obj.css("border-style", "");
        obj.css("border-color", "");
    }


    // 用户登录（需要判空提示）
    function login() {
        layui.use('layer', function () {
            let layer = layui.layer;

            let username = $("#username");
            let password = $("#password");

            if (username.val().length === 0) {
                $("#tip1").show();
                errorCss(username)
            }

            if (password.val().length === 0) {
                $("#tip2").show();
                errorCss(password)
                return;
            }

            $.ajax({
                url: '/admin/login',
                type: 'post',
                data: JSON.stringify({username: username.val(), password: password.val()}),
                contentType: 'application/json;charset=utf-8',
                success: function (result) {
                    if (result === "pass") {
                        location.href = "/admin";
                    } else {
                        layer.msg('用户名或密码不正确',{offset: '10px',anim:2});
                    }
                },
                error: function () {
                    layer.msg("服务器开小差了……", {icon: 2, anim: 6});
                }
            });
        });
    }
</script>

</body>
</html>